<template>
    <div>
        <el-dialog title="换新详情" v-model="state.showInfoDialog" width="90%">

            <div class="flex mb-3">
                <div class=" left  mr-3  " style="width: 260px;">
                    <div class="title ">
                        设备
                    </div>
                    <div class="content rounded-b-[10px] text-[12px]">
                        <div>
                            {{ state.info['产品品牌'] }}
                        </div>
                        <div class="break-all">
                            {{ state.info['产品型号'] }}
                        </div>
                        <div class="flex justify-center items-baseline">
                            <img src="https://mercrt-fd.zol-img.com.cn//t_s640x2000/g7/M00/04/08/ChMkK2YFNASIaomUAAVlHh-DqqYAAcTPgOUKDUABWU2039.png"
                                alt="" class="w-[160px] mx-auto">
                        </div>
                        <div class="flex items-baseline pb-[4px]">
                            <div class="w-[80px]">序列号</div>
                            <div class="flex-1 text-right break-all">{{ state.info['产品IMEI旧'] }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">IMEI</div>
                            <div class="flex-1 text-right break-all">{{ state.info['产品IMEI旧'] }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">MEID</div>
                            <div class="flex-1 text-right break-all">{{ state.info['产品IMEI旧'] }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">不在保(无保修)</div>
                            <div class="flex-1 text-right break-all"></div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">激活政策详情</div>
                            <div class="flex-1 text-right break-all"></div>
                        </div>
                    </div>

                </div>
                <div class="right flex-1">

                    <div class="title">
                        客户信息
                    </div>
                    <div class="content  rounded-b-[10px] text-[12px]">
                        <div class="flex items-baseline flex-row pb-[10px]">
                            <div class="flex-[0_0_20%]">接受日期和时间</div>
                            <div class="flex-[0_0_25%]  pr-[30px] break-all">{{ state.info['受理日期'] }}</div>
                            <div class="flex-[0_0_15%]">短信更新</div>
                            <div class="flex-[0_0_10%]">否</div>
                            <div class="flex-[0_0_15%]">省/自治区/直辖市</div>
                            <div class="flex-1 break-all">上海</div>
                        </div>
                        <div class="flex items-baseline flex-row pb-[10px]">
                            <div class="flex-[0_0_20%]">客户报告的组件问题</div>
                            <div class="flex-[0_0_25%]  pr-[30px] break-all">物理损坏/显示屏多条裂纹物理损坏/显示屏多条裂纹</div>
                            <div class="flex-[0_0_15%]"></div>
                            <div class="flex-[0_0_10%]"></div>
                            <div class="flex-[0_0_15%]   ">邮政编码</div>
                            <div class="flex-1 break-all">200000</div>
                        </div>

                        <div div class="flex items-baseline flex-row pb-[10px]">
                            <div class="flex-[0_0_20%]">客户信息录入备注</div>
                            <div class="flex-[0_0_25%]  pr-[30px] break-all">屏幕碎裂</div>
                            <div class="flex-[0_0_15%]"></div>
                            <div class="flex-[0_0_10%]"></div>
                            <div class="flex-[0_0_15%]">国家地区</div>
                            <div class="flex-1 break-all">中国大陆</div>
                        </div>
                        <div div class="flex items-baseline flex-row pb-[10px]">
                            <div class="flex-[0_0_20%]">维修分类</div>
                            <div class="flex-[0_0_25%] pr-[30px] break-all">CIN</div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="flex">
                <div class="left flex-1 mr-3 ">
                    <div class="title ">
                        手机验机详情
                    </div>
                    <div class="content  rounded-b-[10px] text-[12px] pb-[10px]">

                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">外观</div>
                            <div class="flex-1 text-left break-all pl-[10px]">
                                正常</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">屏幕</div>
                            <div class="flex-1 text-left break-all pl-[10px]">
                                正常</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">指南针</div>
                            <div class="flex-1 text-left break-all pl-[10px]">
                                正常</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">异常声音</div>
                            <div class="flex-1 text-left break-all pl-[10px]">
                                异常</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">麦克风</div>
                            <div class="flex-1 text-left break-all pl-[10px]">
                                正常</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">蓝牙</div>
                            <div class="flex-1 text-left break-all pl-[10px]">
                                异常</div>
                        </div>

                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">读取SIM卡</div>
                            <div class="flex-1 text-left break-all pl-[10px]">
                                异常</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">面睿ID</div>
                            <div class="flex-1 text-left break-all pl-[10px]">
                                异常</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px]">
                            <div class="w-[80px]">指纹录入</div>
                            <div class="flex-1 text-left break-all pl-[10px]">
                                异常</div>
                        </div>










                    </div>




                </div>
                <div class="right flex-1 mr-3">

                    <div class="title">
                        部件
                    </div>
                    <div class="content  rounded-b-[10px] text-[12px]">
                        <div class="font-extrabold pb-[20px]">Display, china</div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">部件</div>
                            <div class="flex-1 text-left break-all pl-[10px]">CH{{ state.info.bujian }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">覆盖范围</div>
                            <div class="flex-1 text-left break-all pl-[10px]">保外无保障</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">退还状态</div>
                            <div class="flex-1 text-left break-all pl-[10px]">已知故障部件</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">状态</div>
                            <div class="flex-1 text-left break-all pl-[10px]"></div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">KBB退还订单</div>
                            <div class="flex-1 text-left break-all pl-[10px]">AEA{{ state.info.KBB }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">组件/问题</div>
                            <div class="flex-1 text-left break-all pl-[10px]">物理损坏/显示屏多条裂纹</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">可重复性</div>
                            <div class="flex-1 text-left break-all pl-[10px]">连续的</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">使用的部件</div>
                            <div class="flex-1 text-left break-all pl-[10px]">CH{{ state.info.KBB }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">保证选项</div>
                            <div class="flex-1 text-left break-all pl-[10px]">VMI黄色 服务费用</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">KBB序列号</div>
                            <div class="flex-1 text-left break-all pl-[10px]">{{ state.info.KBB2 }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px]">KGB序列号</div>
                            <div class="flex-1 text-left break-all pl-[10px]">{{ state.info.KGB1 }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px] text-danger">验证KGB</div>
                            <div class="flex-1 text-left break-all pl-[10px] text-danger">{{ state.info.KGB2 }}</div>
                        </div>
                        <div class="flex  items-baseline pb-[4px] ">
                            <div class="w-[80px] text-danger">KGB是否一致</div>
                            <div class="flex-1 text-left break-all pl-[10px] ">是</div>
                        </div>
                    </div>
                </div>
                <div class="right flex-1 mr-3">

                    <div class="title">
                        备注
                    </div>
                    <div class="content  rounded-b-[10px] text-[12px]">
                        <div class="py-[15px] border-solid border-0 border-b border-[#eee]">
                            <div class="flex items-center  ">
                                <div class="w-[100px] font-semibold">技术员备注</div>
                                <div class="flex-1 text-right">{{ state.info['受理日期'] }}</div>
                            </div>
                            <div class="font-bold pb-[5px]">手机硬件验机正常</div>
                            <div class="text-[#666]">添加人:刘 英波</div>
                        </div>
                        <div class="py-[15px] border-solid border-0 border-b border-[#eee]">
                            <div class="flex items-center  ">
                                <div class="w-[100px] font-semibold">技术员备注</div>
                                <div class="flex-1 text-right">{{ state.info['受理日期'] }}</div>
                            </div>
                            <div class="font-bold pb-[5px]">手机开机正常，软件正常</div>
                            <div class="text-[#666]">添加人:刘 英波</div>
                        </div>

                    </div>

                </div>
                <div class="right flex-1">

                    <div class="title ">
                        问题
                    </div>
                    <div class="content  rounded-b-[10px] text-[12px]">
                        <div>
                            <el-radio disabled value="disabled">设备所有者是否请求了服务</el-radio>
                        </div>
                        <div class="pl-[20px]">
                            <el-radio disabled value="disabled">是</el-radio>
                        </div>
                        <div class="pl-[40px]">
                            <el-radio disabled value="disabled">你是否能将设备开机?</el-radio>
                        </div>
                        <div class="pl-[60px]">
                            <el-radio disabled value="disabled">是</el-radio>
                        </div>
                    </div>

                </div>
            </div>




            <template #footer>
                <span>
                    <el-button @click=" state.showInfoDialog = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script lang="ts" setup name="info">

import { apiTbHxwtDetail } from '@/api/tb_hxwt'

const state = reactive({
    showInfoDialog: false,
    info: {
        '产品IMEI': '352425465309774'
    }

})

const open = (row: any) => {
    state.showInfoDialog = true
    apiTbHxwtDetail({ id: row.id }).then(res => {
        state.info = res

    })
}

defineExpose({
    open: open
})



</script>

<style scoped>
.title {
    background: #ccc;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}

.content {
    height: 400px;
    border: 1px solid #ccc;
    padding: 15px;
}
</style>
